<!--
 * @Author: Wangtao
 * @Date: 2020-12-24 11:49:24
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-12-24 17:57:50
-->
<template>
  <continer>
    <template slot="content">
      <div class="con">
        <div class="tit">外显号:</div>
        <div>
          <el-input disabled :value="numberList | filterNumber"></el-input>
        </div>
      </div>
      <div class="con">
        <div class="tit">分组:</div>
        <el-select
          :value="editGroupList"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请输入分组名称，回车完成创建"
          class="editSelect"
          @input="selectBlur"
        >
          <el-option
            v-for="(item, index) in groupList"
            :key="index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Emit, Prop, Watch } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import cloneDeep from 'lodash/cloneDeep'
import { ElMessage } from 'element-ui/types/message'
import { GroupObject, ExplicitData, UpdateExplicitPatams } from './types/group'
import { deepClone } from '@/utils/common'
import { NumberModule } from '@/store/modules/config/number'
@Component({
  name: 'edit-explicit',
  components: { continer },
  filters: {
    filterNumber (numlist: string[]) {
      if (numlist.length > 2) {
        const newList: string[] = numlist.slice(1, 2)
        return newList.join(',') + '...等' + numlist.length + '个号码'
      } else {
        return numlist.join(',')
      }
    }
  }
})
export default class extends Vue {
  @Prop({ default: () => [] }) private groupList: GroupObject[] | undefined
  @Prop({ default: () => [] }) private numberList: string[] | undefined
  @Prop({ default: () => [] }) private currentGroupList: GroupObject[] | undefined
  private $message: ElMessage | undefined
  private editGroupList: string[] = []
  @Watch('currentGroupList', { immediate: true })
  private groupListChange (list: string[]): void {
    this.$set(this, 'editGroupList', deepClone(list))
  }

  @Watch('editGroupList')
  private editGroupListChange (editGroupList: string[]): void {
    let placeholder: string = ''
    editGroupList.length > 0 ? placeholder = '请输入分组名称，回车键完成创建' : placeholder = '';
    (document as any).querySelector('.editSelect .el-select__input').setAttribute('placeholder', placeholder)
  }

  private selectBlur (newList: string[]): void {
    this.editGroupList = Array.from(new Set(newList))
  }

  private onSubmit (): void {
    const saveList: GroupObject[] = this.editGroupList.map((name: string) => {
      const returnObj: GroupObject = { _id: '', name };
      (this.groupList as GroupObject[]).some((item: GroupObject) => {
        if (name === item.name) {
          returnObj._id = item._id
          return true
        }
      })
      return returnObj
    })
    const data: UpdateExplicitPatams = { url: '/call/action/config/displayNumber/update', method: 'POST', data: { numbers: (this.numberList as string[]), group: saveList } }
    NumberModule.NumberCommonAction(data).then((res) => {
      if (res && res.success) {
        this.$emit('change')
      }
    })
  }

  private cancel (): void {
    this.$emit('cancel')
  }
}
</script>

<style lang="stylus" scoped>
.tit, .con
  margin-bottom 10px
</style>
